<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Dojo interactive benchmark tool</title>

	<!-- make display better on mobile, so that results appear under the controls rather than to the right of them -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

	<style>
		@import "../../dijit/themes/claro/claro.css";
		@import "../themes/claro/document.css";
		@import "../../dijit/tests/css/dijitTests.css";

		#resultsContainer, #testControl, #submitControl {
			margin: 20px;
			padding:12px;
			background-color:#fff;
			-moz-border-radius:8pt 8pt;
			-webkit-border-radius:7pt;
			border:2px solid #ededed;
		}

		#resultsContainer {
			padding-top: 0;
		}

		#results {  overflow:auto; min-height:100px; border:1px solid #ccc; color:darkred; padding:8px;  }

		.runHolder, .submitButton {
			border:1px solid #ccc; padding:3px;
			-moz-border-radius:8pt 8pt;
			-webkit-border-radius:7pt;
			text-align:center;
			cursor:pointer; background-color:#ededed; display:block; width:125px;
		}

	</style>


	<script type="text/javascript" src="../../dojo/dojo.js"></script>
	<script type="text/javascript">
		// basic stats are located at http://dante.dojotoolkit.org/benchmarks/

		dojo.require("dojo.fx");
		dojo.require("dijit.dijit");
		dojo.require("dijit.form.ComboBox");
		dojo.require("dojo.parser");

		// setup global variables
		var masterResults = { clientNavigator: navigator.userAgent, dataSet: [], errors: [] };
		var isRunning = false;
		var theCount, theClass, runner = null;
		var testCount = 0;

		dojo.ready(function(){
			theCount = dojo.byId('countNode');
			runner = dojo.byId('runner');
			masterResults.dojoVersion = dojo.version.toString();
			
			dojo.parser.parse();	// instantiate the ComboBox
			theClass = dijit.byId('classNode');
		});


		function _toggleRunMsg(){
			var newMsg = (isRunning) ? " Run Test " : " Running ...";
			dojo.fx.chain([
				dojo.fadeOut({
					node:runner,
					duration:200,
					onEnd: function(){
						runner.innerHTML = newMsg;
						isRunning=!isRunning;
					}
				}),
				dojo.fadeIn({ node:runner, duration: 200 })
			]).play();
		}

		function runTest(){
			if(isRunning){ return; }
			_toggleRunMsg();
			setTimeout(function(){ _runRealTest(); },1000);
		}

		function _runRealTest(){

			// Remove widgets from previous run
			dojo.forEach(dijit.findWidgets(dojo.byId("widgetsContainer")), function(widget){
				widget.destroyRecursive();
			});

			var count = theCount.value,
				aclass = theClass.get("value"),
				theMethod = dojo.query("input[name=theMethod]").filter(function(node){ return node.checked; }).attr("value")[0],
				tmpNode = document.createElement('div'),
				startTimer;
			try{
				dojo.require(/dojox\.mobile\.[A-Z]/.test(aclass) ? "dojox.mobile._base" : aclass);
				dojo.ready(function(){
					var i;
					switch(theMethod){
						case "parse" :
						case "fastparse" :
							var tmpString = [];
							var tag = /Button/.test(aclass) ? "button" : (/Text/.test(aclass) ? "input" : "div");
							for(i=0; i<count; i++){
								tmpString.push(
								'<', tag, ' ',
								 (theMethod == 'fastparse' ? 'data-dojo-type="' : 'dojoType="'),
								aclass, '"></', tag, '>');
							}
							tmpNode.innerHTML = tmpString.join("");
							startTimer = new Date().getTime();
							dojo.parser.parse(tmpNode);
							break;
						case "create" :
							var construction = dojo.getObject(aclass);
							startTimer = new Date().getTime();
							for(i=0; i<count; i++){
								var tmp = new construction({});
								tmpNode.appendChild(tmp.domNode);
							}
							break;
					}

					// Render the widgets in a visible <div> as part of benchmark
					dojo.byId("widgetsContainer").appendChild(tmpNode);
					
					// [Some] browsers defer rendering until after JS finishes running
					// so use a setTimeout(, 0) to make sure widgets render.
					setTimeout(function(){
						var endTime = new Date().getTime() - startTimer;
	
						var average = (endTime / count);
						var msg = "It took: "+endTime+"ms to "+theMethod+" "+count+" "+aclass+" widgets"+
							"<br>(average: "+average+" ms/widget)<br><br>";
	
						masterResults.dataSet.push({
							testNum: ++testCount,
							dijit: aclass,
							testCount: count,
							testAverage: average,
							testMethod: theMethod,
							testTime: endTime
						});

						dojo.byId("results").innerHTML += msg;
						
						dojo.byId("mailto").href = "mailto:?subject=test results&body=" +
							encodeURIComponent(dojo.byId("results").innerText || dojo.byId("results").textContent);

						setTimeout(function(){ _toggleRunMsg(); },250);
					}, 0);

				});
			}catch(e){

				setTimeout(function(){ _toggleRunMsg(); },250);
				console.error("Ooops:", e);
			}

		}

		function doDebug(){
			dojo.byId('hiddenHolder').value = dojo.toJson(masterResults);
			return true;
		}

	</script>
</head>
<body class="claro">
	<h1 class="testTitle">Dojo Benchmark Tool</h1>

	<div id="testControl">

		Class:
			<select data-dojo-type="dijit/form/ComboBox"
					data-dojo-props='name:"dijit", id:"classNode", value:"dijit.form.Button", style:{width:"200px"}'>
				<option>dijit.form.Button</option>
				<option>dojox.mobile.Button</option>
				<option>dijit.form.TextBox</option>
				<option>dojox.mobile.app.TextBox</option>
			</select>
		<br><br>
		Count: <input type="text" name="count" id="countNode" value="100" size="4" ><br><br>

		Method:
			<br>
			<label for="parse">
				<input type="radio" name="theMethod" value="parse" id="parse" checked="on"> Parse with 1.x dojoType syntax
			</label>
			<br>
			<label for="fastparse">
				<input type="radio" name="theMethod" value="fastparse" id="fastparse"> Parse with 2.0 data-dojo-type syntax
			</label>
			<br>
			<label for="create">
				<input type="radio" name="theMethod" value="create" id="create"> Create programatically
			</label>

		<br><br>
		<span onclick="runTest()" class="runHolder"><span id="runner"> Run Test </span></span>

	</div>

	<div id="resultsContainer"><h3>Results:</h3><div id="results"></div></div>

	<div id="submitControl">
		<p>
		* The results of these tests are important to us.  Please feel free to submit your dataSet
		to Dojotoolkit.org. Your privacy will be respected.
		</p>
		<div id="hiddenResults">
			<form id="resultForm" action="http://dante.dojotoolkit.org/benchmarks/submit.php"
				method="POST" onsubmit="doDebug()">
				<input type="hidden" id="hiddenHolder" value="" name="key">
				<input type="submit" value=" Submit Data " class="submitButton">
			</form>
		</div>
		
		<p>Alternately, <a id="mailto">mail results</a> to any email address.</p>
	</div>

	<div id="widgetsContainer" style="clear: both;"></div>
</body>
</html>
